<template>
	<view class="course-detail">
		<!-- 课程封面 -->
		<image :src="course.coverImage" mode="widthFix" class="cover-image"></image>

		<!-- 课程标题 -->
		<view class="title">{{ course.title }}</view>

		<!-- 课程描述 -->
		<view class="description">{{ course.description }}</view>

		<!-- 课程价格 -->
		<view class="price">¥{{ course.price }}</view>

		<!-- 课程大纲 -->
		<view class="outline">
			<view class="section-title">课程大纲</view>
			<view v-for="(item, index) in course.outline" :key="index" class="outline-item">
				{{ item }}
			</view>
		</view>

		<!-- 课程讲师信息 -->
		<view class="instructor">
			<view class="section-title">讲师信息</view>
			<view class="instructor-info">
				<image :src="course.instructor.avatar" mode="aspectFit" class="avatar"></image>
				<view class="info">
					<view class="name">{{ course.instructor.name }}</view>
					<view class="bio">{{ course.instructor.bio }}</view>
				</view>
			</view>
		</view>

		<!-- 课程评价 -->
		<view class="reviews">
			<view class="section-title">学员评价</view>
			<view v-for="(review, index) in course.reviews" :key="index" class="review">
				<view class="rating">{{ review.rating }}/5</view>
				<view class="content">{{ review.content }}</view>
				<view class="author">{{ review.author }}</view>
			</view>
		</view>

		<!-- 报名按钮 -->
		<button @click="enrollCourse" class="enroll-button">立即报名</button>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				courseId: null,
				// 真实项目中这里应该是从后端或本地数据中获取课程信息
				courses: {
					java1: {
						coverImage: 'https://example.com/java.jpg',
						title: 'Java基础',
						description: '学习 Java 编程的基础知识。',
						price: '999.00',
						outline: ['第一章：Java环境搭建', '第二章：基本语法与数据类型'],
						instructor: {
							avatar: 'https://example.com/instructor-avatar.jpg',
							name: '张三',
							bio: '拥有10年Java开发经验的资深工程师'
						},
						reviews: [{
								rating: 4.5,
								content: '讲解清晰，适合新手。',
								author: '李四'
							},
							{
								rating: 5.0,
								content: '非常棒的课程！',
								author: '王五'
							}
						]
					},
					
					math1: {
						coverImage: 'https://example.com/math.jpg',
						title: '导数微积分',
						description: '掌握导数与微积分的核心概念。',
						price: '699.00',
						outline: ['第一章：极限与连续', '第二章：导数的基本运算'],
						instructor: {
							avatar: 'https://example.com/math-instructor.jpg',
							name: '李老师',
							bio: '数学系教授，教学经验丰富'
						},
						reviews: [{
							rating: 4.8,
							content: '受益匪浅！',
							author: '赵六'
						}]
					}
					// 其他课程...
				}
			};
		},
		onLoad(options) {
			if (options && options.courseId) {
				this.courseId = options.courseId;
				this.loadCourseDetails(options.courseId);
			}
		},
		methods: {
			loadCourseDetails(courseId) {
				const courseData = this.courses[courseId];
				if (courseData) {
					this.course = courseData;
				} else {
					uni.showToast({
						title: '课程不存在',
						icon: 'none'
					});
				}
			},
			enrollCourse() {
				uni.showToast({
					title: '报名成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style lang="scss">
	.course-detail {
		padding: 20px;
	}

	.cover-image {
		width: 100%;
		border-radius: 8px;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.description {
		font-size: 16px;
		color: #666;
		margin-bottom: 20px;
	}

	.price {
		font-size: 20px;
		color: #f60;
		margin-bottom: 20px;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.outline-item {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.instructor-info {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.info .name {
		font-size: 18px;
		font-weight: bold;
	}

	.info .bio {
		font-size: 14px;
		color: #666;
	}

	.review {
		margin-bottom: 20px;
	}

	.rating {
		font-size: 16px;
		color: #f60;
		margin-bottom: 5px;
	}

	.content {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.author {
		font-size: 14px;
		color: #666;
	}

	.enroll-button {
		width: 100%;
		background-color: #f60;
		color: white;
		border: none;
		padding: 10px 0;
		border-radius: 8px;
		font-size: 18px;
	}
</style>